<template>
    <h1>注册{{ setting.title }}</h1>
    <a-form :model="user" ref="formRef" :rules="rules" :wrapper-col="wrapperCol">
        <a-form-item name="username" required>
            <a-input placeholder="用户名" v-model:value="user.username">
                <template #prefix>
                    <UserOutlined />
                </template>
            </a-input>
        </a-form-item>

        <a-form-item name="password" required>
            <a-input-password placeholder="密码" v-model:value="user.password">
                <template #prefix>
                    <LockOutlined />
                </template>
            </a-input-password>
        </a-form-item>

        <a-form-item name="phone" required>
            <a-input placeholder="手机号" v-model:value="user.phone">
                <template #prefix>
                    <PhoneOutlined />
                </template>
            </a-input>
        </a-form-item>

        <a-form-item name="email" required>
            <a-input placeholder="邮箱" v-model:value="user.email">
                <template #prefix>
                    <svg-icon name="email" width="15px" height="15px"></svg-icon>
                </template>
            </a-input>
        </a-form-item>

        <a-form-item>
            <a-button :loading="loading" style="width: 100%;" type="primary" @click="doRegister">
                注册
            </a-button>
        </a-form-item>
        <a-form-item>
            <a-button ghost style="width: 100%;color: #8c8c8c;" @click="doLogin">
                登录账号
            </a-button>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import router from "@/router";
import { register } from "@/api/user";
import setting from '@/setting';

const user = ref({});
const loading = ref(false);
const wrapperCol = {
    span: 22,
};

//注册逻辑
const doRegister = () => {
    formRef.value
        .validate()
        .then(() => {
            loading.value = true;
            register(user.value).then((res) => {
                if (res.code === 200) {
                    loading.value = false;
                    message.success("注册成功！");
                    router.push('/login')
                } else {
                    loading.value = false;
                }
            });
        });
}

//登录逻辑
const doLogin = () => {
    router.push('/login')
}


//表单验证
const formRef = ref();
const rules = ref({
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'change',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
    ],
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'change',
        },
    ],
    email: [
        {
            required: true,
            message: '请输入邮箱',
            trigger: 'change',
        },
    ],
})
</script>
<style scoped lang="scss">
h1 {
    margin-bottom: 40px;
    font-size: 26px;
    color: #333;
}
</style>